<template>
	<view>
		<view class="content">
			<view class="top-bar">
				<view class="bar-list">
					<view class="bar-items" :class="current === index ? 'bar-current':''" v-for="(items, index) in list" :key="index"
					 @click="listChange(index)">
						<view class="bar-name">{{ items.name }}</view>
					</view>
				</view>
				<view class="choose-button">
					<picker @change="bindPickerChange" :value="dateIndex" :range="dateList" range-key="name">
						<view class="choose-name">
							<view class="uni-input">{{ dateList[dateIndex].name }}</view>
							<view class="triangle">
								<image style="width: 100%;height: 100%;" :src="icons.triangle"></image>
							</view>
						</view>
					</picker>
				</view>
			</view>
			<view v-show="current === 0 || current === 1">
				<search-input></search-input>
				<view class="good-content">
					<view class="good-list" v-for="(items,index) in goodlist" :key="index">
						<view class="good-items">
							<view class="good-name"> {{ items.name }}</view>
							<view class="sell-content">
								<view><span class="sale-name">销售额：</span> <span class="sale-price">
										￥ {{ items.price }}</span></view>
								<view class="sale-volume"><span class="sale-name">销售量：</span> <span class="sale-number">{{ items.number }}</span>
								</view>
							</view>
						</view>
						<view class="icon-right">
							<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icon.right"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current === 2">
			<view class="sale-title">
				<view class="sale-detail" v-for="(items, index) in saleList" :key="index">
					<view class="sale-detail-name"> {{ items.name }} </view>
					<view class="sale-detail-price">￥{{ items.price }}</view>
				</view>
			</view>
			<view class="sale-chart">
				<canvas canvas-id="canvasArea" id="canvasArea" class="charts" :style="{'width':'100%','height':'100%'}" @touchstart="touchIt($event,'canvasArea')"></canvas>
			</view>
			<view>
				<view class="table-title">
					<view class="table-name">日期</view>
					<view class="table-name">销售额(￥)</view>
					<view class="table-name">商品成本(￥)</view>
					<view class="table-name">预估毛利</view>
				</view>
				<view class="table-content" v-for="(items, index) in detailList" :key="index">
					<view class="table-value"> {{ items.date }} </view>
					<view class="table-value"> {{ items.sumPrice }} </view>
					<view class="table-value"> {{ items.cost }} </view>
					<view class="table-value"> {{ items.profit }} </view>
				</view>
			</view>
		</view>
		<navigation-bar></navigation-bar>
	</view>
</template>

<script>
	import searchInput from '@/components/search-input/index.vue';
	import navigationBar from '@/components/navigation-bar/index.vue';
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default {
		components: {
			searchInput,
			navigationBar
		},
		data() {
			return {
				pixelRatio: 1,
				current: 0,
				list: [{
					name: '终端销售'
				}, {
					name: '商品销售'
				}, {
					name: '收入明细'
				}],
				dateList: [{
					name: '本月'
				}, {
					name: '上月'
				}, {
					name: '本年'
				}, {
					name: '自选时间'
				}],
				dateIndex: 0,
				goodlist: [{
					name: '鸡腿套餐',
					price: 150,
					number: 10
				}, {
					name: '鸡腿套餐',
					price: 150,
					number: 10
				}, {
					name: '鸡腿套餐',
					price: 150,
					number: 10
				}],
				icon: {
					right: '/static/images/icons/icon_next@3x.png',
					triangle: '/static/images/icons/icon_next@3x.png'
				},
				saleList: [{
					name: '总销售额',
					price: 59861
				}, {
					name: '总商品成本',
					price: 59861
				}, {
					name: '总预估毛利',
					price: 59861
				}],
				detailList: [{
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}, {
					date: '20200219',
					sumPrice: 134,
					cost: 35.6,
					profit: 78
				}]
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);

			//this.fillData(Data);
		},
		methods: {
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.dateIndex = e.target.value
			},
			listChange(index) {
				this.current = index;
				if (index === 2) {
					const _this = this
					this.$nextTick(function() {
						let Area = {
							categories: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
							series: [{
								name: "今日销售额",
								data: [100, 95, 80, 150, 112, 132, 80],
								color: "#facc14",
							}]
						};
						_this.showArea("canvasArea", Area);
					})

				}
			},
			showArea(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [0, 15, 10, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			},
			touchIt(e, id) {
				canvasObj[id].touchLegend(e, {
					animation: false
				});
				canvasObj[id].showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		}
	}
</script>

<style>
	.content {
		padding: 0 30rpx;
	}

	.top-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 30rpx 0rpx;
	}

	.bar-list {
		display: flex;
		align-items: flex-end;
	}

	.bar-list .bar-items:not(:last-child) {
		margin-right: 34rpx;
	}

	.choose-button {
		background: rgba(255, 195, 36, 1);
		border-radius: 28px;
		padding: 10rpx 30rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.triangle {
		margin-left: 10px;
		border-width: 16rpx;
		border-style: solid;
		border-color: #333333 transparent transparent transparent;
		display: flex;
		align-items: center;
		position: absolute;
		top: calc(50% - 10rpx);
		right: 0rpx;
	}

	.bar-items {
		position: relative;
	}

	.choose-name {
		display: flex;
		align-items: center;
		position: relative;
		padding-right: 50rpx;
	}

	.bar-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		padding: 12rpx 0rpx;
	}

	.bar-current .bar-name {
		font-size: 36rpx;
		color: #333333;
	}

	.bar-list .bar-current:after {
		content: "";
		display: block;
		width: 40rpx;
		height: 8rpx;
		background: rgba(255, 195, 36, 1);
		border-radius: 4rpx;
		position: absolute;
		border-bottom: 0;
		left: calc(50% - 20rpx)
	}

	.icon-right {
		width: 15rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
	}

	.good-content {
		margin-top: 30rpx;
	}

	.good-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.good-list:not(:last-child) {
		margin-bottom: 30rpx;
	}

	.sell-content {
		display: flex;
	}

	.good-name {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(34, 34, 34, 1);
	}

	.sale-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.sale-price,
	.sale-number {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF5500;
	}

	.sale-volume {
		margin-left: 20rpx;
	}

	.sale-title {
		display: flex;
	}

	.sale-detail {
		flex: 1;
		text-align: center;
	}

	.sale-detail-name {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	.sale-detail-price {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF5500;
	}

	.sale-chart {
		width: 100%;
		height: 500rpx;
	}

	.table-title {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F7F4F8;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		height: 82rpx;
	}

	.table-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 82rpx;
		border-bottom: 1rpx solid #E0E0E0;
	}

	.table-name {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.table-value {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
</style>
